<template>
  <div>
    <div class="group-operation-title-box border">
      <div class="group-operation-title">
        <div class="large-title">集团运营指标</div>
        <div class="small-title">最近更新{{ month }}月</div>
      </div>
      <div class="dropdown-box">
        <div class="time-select">
          <el-date-picker size="mini" :clearable="false" v-model="selectTimeStr" type="month" format="yyyy年M月" placeholder="请选择" @change="changeTime"> </el-date-picker>
        </div>
      </div>
    </div>
    <div class="grid-box">
      <div class="grid-item pointer" @click="showDialog(4)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon1.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">净运营收入</div>
            <div class="grid-small-title">累计到{{ month }}月</div>
          </div>
          <div class="grid-main" v-if="dataInfo.netOperatingIncome !== null">{{ dataInfo.netOperatingIncome | formatMoney }}</div>
           
          <div class="grid-main" v-else>暂无</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(5)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon2.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">资本性支出</div>
            <div class="grid-small-title">累计到{{ month }}月</div>
          </div>
          <div class="grid-main" v-if=" dataInfo.capitalExpend !== null">{{ dataInfo.capitalExpend | formatMoney }}</div>
          <div class="grid-main" v-else>暂无</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(6)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon3.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">净现金流</div>
            <div class="grid-small-title">累计到{{ month }}月</div>
          </div>
          <div class="grid-main" v-if="dataInfo.netCash !== null">{{ dataInfo.netCash | formatMoney }}</div>
          <div class="grid-main" v-else>暂无</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(7)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon4.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">现金流口径收缴率</div>
            <div class="grid-small-title">{{ month }}月</div>
          </div>
          <div class="grid-main" v-if="dataInfo.contractCaliberCapture !== null">{{ dataInfo.contractCaliberCapture }}</div>
          <div class="grid-main" v-else>暂无</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(8)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon5.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">权责口径收缴率</div>
            <div class="grid-small-title">{{ month }}月</div>
          </div>
          <div class="grid-main" v-if="dataInfo.rightsCaliberCapture !== null">{{ dataInfo.rightsCaliberCapture }}</div>
          <div class="grid-main" v-else>暂无</div>
        </div>
      </div>
    </div>

    <operation-popup ref="operationPopup" :select-time="selectTime" :operation-type="operationType" :dialog-type="dialogType"></operation-popup>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import operationPopup from './operationPopup';
import { apiBlocOperationStatistics } from '../api/index';
export default {
  data() {
    return {
      selectTimeStr: dayjs(new Date(new Date().getTime() - 24*30*60*60*1000)),
      selectTime: dayjs(new Date(new Date().getTime() - 24*30*60*60*1000)).format('YYYY-MM'),
      dialogType: null,
      operationType: null,
      dataInfo: {},
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      let res = await apiBlocOperationStatistics({
        planYear: this.selectTime.substr(0, 4),
        planMonth: this.selectTime.substr(5, 2) > 9 ? this.selectTime.substr(5, 2) : this.selectTime.substr(6, 1),
        primaryKey: this.$route.query.planKey ? this.$route.query.planKey : null
      });
      this.dataInfo = res;
    },
    changeTime() {
      this.selectTime =  dayjs(this.selectTimeStr).format('YYYY-MM')
      this.getInfo();
      this.$emit('changeTime', this.selectTime);
    },
    showDialog(dialogType) {
      this.dialogType = dialogType;
      this.operationType = 1;
      this.$nextTick(() => {
        this.$refs.operationPopup.showFurther = true;
        this.$refs.operationPopup.getTreeList();
      });
    },
  },
  computed: {
    month() {
      return dayjs(this.selectTime).month() + 1;
    },
  },
  components: {
    operationPopup,
  }
};
</script>
<style lang="scss">
.grid-box {
  margin-bottom: 30px;
  height: 100px;
  display: flex;
  align-items: center;

  .grid-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .grid-icon {
      width: 38px;
      height: 38px;
      margin-right: 15px;
    }
    .grid-main-box {
      min-height: 58px;
      .grid-title-box {
        display: flex;
        align-items: center;
        .grid-large-title {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }

        .grid-small-title {
          margin-left: 5px;
          margin-top: 5px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
      }

      .grid-main {
        margin-top: 5px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
      }
    }
  }

  .el-divider {
    height: 40px;
  }
}
</style>